<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/denglu.css">
    <script src="../js/all.js"></script>
    <link rel ="icon" href ="../images/logo.jpg" type ="image/x-icon"/>
    <title>登录界面</title>
</head>
<body>
    <div class="box">
        <!-- 充当遮挡和切换作用，引用了外部的js -->
        <div class="pre-box">
            <h1 id="h1">WELCOME TO YOU!</h1>
            <p id="p">JION US!</p>
            <!-- 根据所在位置进行文字改变 -->
        </div>
        <div class="register-from">
            <!-- 内容部分 -->
            <div class="title-box">
                <h1>注册</h1> 
            </div>
            <div class="input-box">
                <input type="text" placeholder="用户名">
                <input type="password" placeholder="密码">
                <input type="password" placeholder="确认密码">
            </div>
            <div class="btn-box">
                <button class="button"><a href="#">注册</a></button>
                <p onclick="mySwich()">已有账号？去登录</p>
            </div>
            </div>
            <div class="login-from">
            <div class="title-box">
                <h1>登录</h1> 
            </div>
            <div class="input-box">
                <input type="text" placeholder="用户名">
                <input type="password" placeholder="密码">
            </div>
            <div class="btn-box">
                <button class="button"><a href="index.html">登录</a></button>
                <p onclick="mySwich()">没有账号？去注册</p>
            </div>    
            </div>
        </div>
    </div>
    <script>
        let flag=true
        // 利用布尔值，进行位置移动，用if判定
        let h1 = document.querySelector("#h1")
        let p = document.querySelector("#p")
        const mySwich=()=>{
            if(flag){
                $(".pre-box").css("transform","translateX(-100%)")
                $(".pre-box").css("background-color","#92c0f7")
                h1.innerHTML = "WELCOME TO YOU!"
                p.innerHTML = "BACK HOME"
            }else{
                $(".pre-box").css("transform","translateX(0%)")
                $(".pre-box").css("background-color","#decafb")
                h1.innerHTML = "WELCOME TO YOU!"
                p.innerHTML = "JION US!"
            }
            flag=!flag
        }
    </script>
</body>
</html>